<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text">
<button>sessionStorage存储</button>
<button>sessionStorage获取</button>
<button>sessionStorage更新</button>
<button>sessionStorage删除</button>
<button>sessionStorage清除</button>
<script>

    //在h5中提供两种web存储方式

    // sessionStorage  session（会话，会议） 5M  当窗口关闭是数据销毁  内存
    // localStorage    20M 永久生效 ，除非手动删除  清理垃圾  硬盘上
    var input = document.querySelector("input");
    var buttons = document.querySelectorAll("button");
    console.log(buttons);

    //        sessionStorage存储数据
    buttons[0].onclick = function(){
        console.log("session Store "+input.value);
        window.sessionStorage.setItem("name", input.value);
        window.sessionStorage.setItem("password", "ccc");

    };


    //        sessionStorage获取数据
    buttons[1].onclick = function(){
        console.log("name===" + window.sessionStorage.getItem("name"));
        console.log('localStorage  name==' + window.localStorage.getItem("userName"));
    };


    //        sessionStorage更新数据
    buttons[2].onclick = function () {
        window.sessionStorage.setItem("name", input.value);
    };

    //        sessionStorage删除数据
    buttons[3].onclick = function () {
        window.sessionStorage.removeItem("name");

    };
    //        sessionStorage清空数据
    buttons[4].onclick = function () {
        window.sessionStorage.clear();

    };

</script>

</body>
</html>